import { useMemo } from 'react'
import DOMPurify from 'dompurify'
import styles from './index.module.less'
import { useProcessMiningEngineStore } from '../../store'
import { Empty } from '@terminus/nusi-slim'

const DocumentTab = () => {

  const { selectedProcess } = useProcessMiningEngineStore()

  // 使用 DOMPurify 清理 HTML 内容，防止 XSS 攻击
  const sanitizedContent = useMemo(() => {
    if (!selectedProcess?.content) return ''
    return DOMPurify.sanitize(selectedProcess.content, {
      // 允许的标签和属性配置
      ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'u', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'li', 'a', 'div', 'span'],
      ALLOWED_ATTR: ['href', 'target', 'class'],
      // 允许 data-* 属性（如果需要）
      // ALLOW_DATA_ATTR: true,
    })
  }, [selectedProcess?.content])

  return (
    <div className={styles.documentTab}>
      <div className={styles.documentTabHeader}>
        <div className={styles.documentTabHeaderTitle}>
          <span>文档</span>
        </div>
      </div>
      { selectedProcess?.id ? (
        <div className={styles.documentTabContent}>
          <div className={styles.documentTabContentTitle}>
            <span >名称</span>
            <span>{selectedProcess?.title}</span>
          </div>
          <div className={styles.documentTabHeaderContentTitle}>
            <span>概要</span>
            <div dangerouslySetInnerHTML={{ __html: sanitizedContent }} />
          </div>
        </div>
      ) : (
        <div className={styles.documentTabContent}>
          <Empty title="当前流程未配置说明文档，请在 Console 中配置" size="sm" type="emptyList" />
        </div>
      ) }
    </div>
  )
}

export default DocumentTab